<template>
  <view class="checkout">
    <view class="navigation" @tap="backref()">
      <view class="navigation_back">
        <uni-icons type="back" size="24" color="#333"></uni-icons>
      </view>
      <view class="navigation_title"> 订单详情 </view>
    </view>

    <view class="checkout_con">
      <view
        class="checkout_con_hd"
        style="margin-bottom: 10rpx"
        @tap="jumpAddress"
      >
        <view class="checkout_address">
          <view class="checkout_label"> 新增收货地址 </view>
          <view class="checkout_more">
            <uni-icons type="forward" size="20"></uni-icons>
          </view>
        </view>
      </view>

      <view class="checkout_con_hd">
        <picker
          @change="bindPickerChange"
          :value="index"
          :range="addressList"
          range-key="userAddress"
        >
          <view class="checkout_address">
            <view class="checkout_label">
              {{ currentAddress.userAddress || "请选择收货人地址" }}
            </view>
            <view class="checkout_more">
              <uni-icons type="forward" size="20"></uni-icons>
            </view>
          </view>
        </picker>
      </view>

      <view class="checkout_con_bd">
        <!-- 商品list -->
        <view class="checkout_goods">
          <view
            class="checkout_good"
            v-for="(item, index) in detail.list"
            :key="index"
          >
            <view class="checkout_good_img">
              <image
                v-if="item.goodsImg"
                :src="domain + item.goodsImg"
                mode="aspectFill"
              ></image>
            </view>
            <view class="checkout_good_info">
              <view class="checkout_good_name">
                {{ item.name }}
              </view>
              <view v-if="item.sku" class="checkout_good_type">
                {{ item.sku }}
              </view>
              <view class="checkout_good_other">
                <view class="checkout_good_price"> ¥{{ item.price }} </view>
                <view class="checkout_good_num"> x{{ item.num }} </view>
              </view>
            </view>
          </view>
        </view>

        <view class="checkout_total_price">
          共{{ detail.total }}件,<text>¥{{ detail.price }}</text>
        </view>

        <!-- 费用详情 -->
        <view class="checkout_money">
          <view class="checkout_lunchbox">
            <view class="checkout_money_label"> 餐盒费 </view>
            <view class="checkout_money_price"> ¥{{ fee.packing || 0 }} </view>
          </view>
          <view class="checkout_lunchbox">
            <view class="checkout_money_label"> 配送费 </view>
            <view class="checkout_money_price"> ¥{{ fee.delivery || 0 }} </view>
          </view>
          <view class="checkout_delivery">
            <view class="checkout_money_label"> 商家减免 </view>
            <view class="checkout_money_price">
              ¥{{ fee.fullReduction || 0 }}
            </view>
          </view>
          <view class="checkout_delivery">
            <view class="checkout_money_label"> 服务费 </view>
            <view class="checkout_money_price">
              ¥{{ fee.service.toFixed(2) || 0 }}
            </view>
          </view>

          <!-- 优惠券 -->
          <template v-if="fee.reductionList.length">
            <picker
              @change="bindPickerChangeReduction"
              :value="reductionIndex"
              :range="fee.reductionList"
              range-key="amount"
            >
              <view class="checkout_delivery">
                <view class="checkout_money_label"> 优惠卷 </view>
                <view
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                  "
                >
                  <view class="checkout_money_price" style="color: red">
                    <span>{{ coupon }}</span>
                  </view>
                  <view class="checkout_more">
                    <uni-icons type="forward" size="20"></uni-icons>
                  </view>
                </view>
              </view>
            </picker>
          </template>
        </view>
      </view>

      <!-- 备注 -->
      <view class="checkout_con_bt">
        <view class="checkout_con_remark">
          <view class="checkout_bt_label"> 备注 </view>
          <view class="checkout_bt_input">
            <input
              type="text"
              v-model="remark"
              placeholder="请选择备注内容"
              placeholder-class="placeholder"
            />
          </view>
        </view>
      </view>

      <!-- 底部支付 -->
      <view class="checkout_pay">
        <view class="checkout_pay_price">
          <span>共¥{{ goodsTotalPrice }}</span>
        </view>
        <view class="checkout_pay_btn" @tap="checkout()"> 结算 </view>
      </view>
    </view>
  </view>
</template>

<script>
import server_url from "../../api/config.js";
import { createOrder, pay, getAddressList, getFee } from "../../api/api.js";
import money from "../../utils/money";
export default {
  data() {
    return {
      currentReduction: {},
      reductionIndex: 1,
      index: 1,
      domain: server_url,
      stordId: "",
      remark: "",
      detail: {
        total: 0,
        price: 0,
        list: [],
      },
      addressList: [],
      currentAddress: {},
      totalPrice: 0,
      fee: {
        delivery: 0, //配送费
        service: 0, //服务费
        totalPrice: 0, //总计价格
        packing: 0, //打包费
        fullReduction: 0, //满减
        reductionList: [],
      },
      clicked: false,
    };
  },
  computed: {
    goodsTotalPrice() {
      if (this.currentReduction.id) {
        return money
          .jia(this.fee.totalPrice, -this.currentReduction.amount)
          .toFixed(2);
      } else {
        return this.fee.totalPrice.toFixed(2);
      }
    },
    coupon() {
      const { name, amount = 0 } = this.currentReduction;
      if (name) return `${name} -￥${amount}`;
      else return `￥${amount}`;
    },
  },
  onLoad(e) {
    this.getAddress();
    const list = JSON.parse(decodeURIComponent(e.data));
    const total = list.reduce((total, item) => {
      return total + item.num;
    }, 0);
    const price = list.reduce((total, item) => {
      return total + money.cheng(item.price, item.num);
    }, 0);
    this.detail = {
      list,
      total,
      price: price.toFixed(2),
    };
    this.stordId = JSON.parse(decodeURIComponent(e.stordId));
    this.getFeeFn();
  },
  methods: {
    backref() {
      uni.navigateBack({
        delta: 1,
      });
    },
    bindPickerChange(e) {
      this.index = e.detail.value;
      this.currentAddress = this.addressList[this.index];
    },
	bindPickerChangeReduction(e) {
	  this.index = e.detail.value;
	  this.currentReduction = this.fee.reductionList[this.reductionIndex];
	},
    // 跳转新增地址页面
    jumpAddress() {
      uni.navigateTo({
        url: "/pages/memberCenter/address/address",
      });
    },
    // 获取地址信息
    getAddress() {
      getAddressList().then((res) => {
        if (res.code == 200) {
          this.addressList = res.data;
          this.addressList.forEach((dd, index) => {
            if (dd.isDefault == 1) {
              this.index = index;
              this.currentAddress = dd;
            }
          });
        }
      });
    },
    // 获取费用信息
    getFeeFn() {
      let arr = [];
      this.detail.list.forEach((dd) => {
        let ddff = {
          goodsId: dd.id,
          number: dd.num,
          sku: dd.sku,
        };
        arr.push(ddff);
      });
      getFee({
        businessId: this.stordId,
        orderList: arr,
      }).then((res) => {
        if (res.code == 200) {
          this.fee = res.data;
        }
      });
    },
    // 结算
    checkout() {
      if (this.clicked) {
        return;
      }
      this.clicked = true;
      if (!this.currentAddress.id) {
        uni.showToast({
          title: "请选择地址！",
          icon: "none",
          duration: 2000,
        });
        return;
      }
      let arr = [];
      this.detail.list.forEach((dd) => {
        let ddff = {
          goodsId: dd.id,
          number: dd.num,
          sku: dd.sku,
        };
        arr.push(ddff);
      });
      let obj = {
        businessId: this.stordId,
        addressId: this.currentAddress.id,
        remark: this.remark,
        orderList: arr,
        reductionId: this.currentReduction.id,
      };
      if (this.fee.reduction) {
        obj.reductionId = this.fee.reductionId;
      }
      uni.showLoading();
      createOrder(obj).then((res) => {
        pay({
          orderNumber: res.data.orderNumber,
        }).then((ddff) => {
          let timeStamp = ddff.data.timeStamp;
          let paySign = ddff.data.paySign;
          let prepayId = ddff.data.prepayId;
          let nonceStr = ddff.data.nonceStr;
          let that = this;
          uni.requestPayment({
            provider: "wxpay",
            timeStamp: timeStamp,
            nonceStr: nonceStr,
            package: "prepay_id=" + prepayId,
            signType: "RSA",
            paySign: paySign,
            success: (res) => {
              console.log("success:" + JSON.stringify(res));
              uni.navigateTo({
                url: "/pages/index/index",
              });
              uni.hideLoading();
              that.clicked = false;
            },
            fail: (err) => {
              console.log("fail:" + JSON.stringify(err));
              that.clicked = false;
              uni.hideLoading();
              that.backref();
            },
          });
        });
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background: #f9fbfc;
}

.navigation {
  width: 100%;
  height: 150rpx;
  padding: 60rpx 24rpx 0;
  text-align: center;
  position: relative;

  .navigation_back {
    position: absolute;
    top: 70rpx;
  }

  .navigation_title {
    color: #333;
    font-size: 36rpx;
  }
}

.checkout_con {
  padding: 0 24rpx;
  padding-bottom: var(--status-bar-height);
  .checkout_con_hd {
    padding: 0 32rpx;
    background-color: #fff;
    border-radius: 12rpx;

    .checkout_address {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32rpx 0;
      border-bottom: 1rpx solid #e8e7e7;
    }

    .checkout_time {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32rpx 0;

      .checkout_label {
        display: flex;
        align-items: center;
      }

      .about_time {
        margin-left: 30rpx;
        font-size: 30rpx;
        color: #ffb226;
      }

      .checkout_more {
        font-size: 30rpx;
        color: #2e343a;
        font-weight: 500;
      }
    }

    .checkout_label {
      font-size: 30rpx;
      color: #2e343a;
      font-weight: 500;
    }

    .checkout_more {
    }
  }

  .checkout_con_bd {
    padding: 32rpx;
    background-color: #fff;
    border-radius: 12rpx;
    margin-top: 20rpx;

    .checkout_store_hd {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 32rpx;
      border-bottom: 1rpx solid #e8e7e7;

      .checkout_store_name {
        font-size: 30rpx;
        color: #2e343a;
        font-weight: 700;
      }

      .checkout_store_phone {
        image {
          width: 30rpx;
          height: 30rpx;
        }
      }
    }

    .checkout_goods {
      border-bottom: 1rpx solid #e8e7e7;

      .checkout_good {
        position: relative;
        padding: 24rpx 0;
        display: flex;

        .checkout_good_img {
          image {
            width: 120rpx;
            height: 120rpx;
            border-radius: 12rpx;
          }
        }

        .checkout_good_info {
          padding-top: 15rpx;
          margin-left: 24rpx;

          .checkout_good_name {
            font-size: 28rpx;
            color: #2e343a;
            font-weight: 500;
          }

          .checkout_good_type {
            font-size: 24rpx;
            color: #9098a0;
            margin-top: 8rpx;
          }

          .checkout_good_other {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-end;

            .checkout_good_price {
              font-size: 32rpx;
              color: #333333;
              font-weight: 500;
            }

            .checkout_good_num {
              font-size: 24rpx;
              color: #9098a0;
            }
          }
        }
      }
    }

    .checkout_money {
      border-bottom: 1rpx solid #e8e7e7;

      .checkout_lunchbox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 0;
      }

      .checkout_delivery {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 20rpx;
      }

      .checkout_money_label {
        font-size: 28rpx;
        color: #9098a0;
        font-weight: 500;
      }

      .checkout_money_price {
        font-size: 28rpx;
        color: #333333;
      }
    }

    .checkout_total_price {
      padding-top: 32rpx;
      text-align: right;
      font-size: 24rpx;
      color: #2e343a;

      text {
        font-size: 32rpx;
        color: #ff2626;
        font-weight: 500;
      }
    }
  }

  .checkout_con_bt {
    padding: 0 32rpx;
    background-color: #fff;
    border-radius: 12rpx;
    margin-top: 24rpx;

    .checkout_con_remark {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32rpx 0;
      border-bottom: 1rpx solid #e8e7e7;
    }

    .checkout_con_tableware {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32rpx 0;
    }

    .checkout_bt_label {
      color: #2e343a;
      font-weight: 500;
      font-size: 28rpx;
    }

    .checkout_bt_input {
      input {
        text-align: right;
        color: #2e343a;
        font-weight: 500;
        font-size: 28rpx;

        &.placeholder {
          color: #9098a0;
        }
      }
    }
  }

  .checkout_pay {
    position: relative;
    margin-top: 50rpx;
    display: flex;
    align-items: center;
    // width: 100%;
    height: 100rpx;
    border-radius: 100rpx;
    background-color: #3a3635;
    padding-left: 40rpx;
    .checkout_pay_price {
      font-size: 30rpx;
      color: #ffffff;
      font-weight: 500;
    }

    .checkout_pay_btn {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30rpx;
      color: #fff;
      top: 0;
      right: 0;
      width: 192rpx;
      height: 100rpx;
      border-top-right-radius: 100rpx;
      border-bottom-right-radius: 100rpx;
      background-color: rgba(255, 141, 26, 1);
    }
  }
}
</style>
